import { Draw } from "../Draw/Draw";

/**
 * konva 双击时的文本输入框
 */
export class KonvaTextInput {
  private draw: Draw;

  constructor(draw: Draw) {
    this.draw = draw;

    // 多加一层容器，是为了确保 contentediable 水平垂直居中
    const textareaBox = document.createElement("div");
    textareaBox.className = "konva-root-container-textarea";

    const textarea = document.createElement("div");
    textarea.setAttribute("contenteditable", "true");

    // 同时为了定位准确，还需要直接将 textarea 添加到 konva 容器中
    const rootBox = this.draw.getRootBox();
    const konvaSelector = ".konvajs-content";
    const konvaBoxParent = <HTMLDivElement>rootBox.querySelector(konvaSelector);

    textareaBox.appendChild(textarea);
    konvaBoxParent.appendChild(textareaBox);
  }
}
